<template>
	<!-- 列表1 图片稍大-->
	<view class="liebiao">
		<view class="ys ">
			<view class="imgs">
				<!-- 'https://ss.lanqb.com/' -->
				<image :src="'https://ss.lanqb.com/'+item.posters.app
" mode=""></image>
				<text class="zi">第{{item.periods}}期</text>
				
			</view>
			<view class="ys-wenzi ">
				<view class="top">
					{{item.title}}
				</view>
				<view v-if="item.profile!==undefined" class="user fl">
					<image class="tx" :src="'https://ss.lanqb.com/'+item.profile.avatar" mode=""></image>
					<text>{{item.profile.nickname}}</text>
				</view>
				<view v-else class="user fl">
					<image class="tx" :src="'https://ss.lanqb.com/'+item.user_profile.avatar" mode=""></image>
					<text>{{item.user_profile.nickname}}</text>
				</view>
			
			
			<view class="foot">
				<text>时间: {{item.begin_at}}</text>
				<view class="ren">{{item.statistic.purchases}}人感兴趣</view>
				<view v-if="item.profile!==undefined" class="anniu">
					预约直播
				</view>
			</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default{
		props:['item']
	}
</script>

<style lang="scss" scoped>
	.ys{
		display: flex;
		padding: 20rpx 0; 
		// border-bottom: 1px solid #eee;
	
		.imgs{
			width: 280rpx;
			height: 210rpx;
			position: relative;
			border-radius: 12rpx;
			overflow: hidden;
	
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.zi{
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				padding: 0rpx 10rpx;
					border-radius: 8rpx;
			background-color: rgba(0,0,0,.4);
				color: #fff;
				font-size: 24rpx;
			}
		}
		.ys-wenzi{
			
			flex: 1;
		
		
		
		
			.top{
				font-size: 26rpx;
				    color: #333;
					font-weight: 700;
				line-height: 36rpx;
				 height: 74rpx;
				 box-sizing: border-box;
				 margin: 8rpx 0 12rpx;
			}
			.user{
				font-size: 24rpx;
				color: #333;
				align-items: center;
				.tx{
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
			.foot{
				position: relative;
				margin-top: 10rpx;
				    color: #9f9f9f;
					font-size: 24rpx;
					.ren{
						margin-top: 10rpx;
					}
					.anniu{
						color: #333;
						position: absolute;
						bottom: -10rpx;
						right: 0rpx;
						width: 140rpx;
						height: 48rpx;
						background-color: #edce8c;
						font-size: 24rpx;
						text-align: center;
						line-height: 48rpx;
						border-radius: 28rpx;
					}
					
			}
		}
		
	}
</style>